<template>
  <view class="promotion">
    <view class="promotion-container">
      <view class="left">
        <navigator :url="list.menuConfig.list[0].info[3].value" hover-class="none">
          <image :src="list.menuConfig.list[0].img"></image>
        </navigator>
      </view>
      <view class="right">
        <navigator :url="list.menuConfig.list[1].info[3].value" hover-class="none">
          <image :src="list.menuConfig.list[1].img" mode="top"></image>
        </navigator>
        <navigator :url="list.menuConfig.list[2].info[3].value" hover-class="none">
          <image :src="list.menuConfig.list[2].img" mode="aspectFill"></image>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      list: {
        type: Object,
        default: () => {}
      }
    }
  }
</script>

<style lang="scss" scoped>
  .promotion {
    &-container {
      display: flex;
      justify-content: space-between;
      height: 260rpx;
      padding: 30rpx;
    }

    .left {
      image {
        width: 260rpx;
        height: 260rpx;
      }
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      image {
        width: 416rpx;
        height: 124rpx;
      }
    }
  }
</style>
